<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师后台-创建课程</title>
    <style>
        /* .container {
            min-height: 100vh;
        } */

        /* .container .nav {
            height: 100vh;
            background-color: #fff;
        } */

        .container .leftmenu {
            min-height: 100vh;
            background-color: #fff;
        }

        .link-secondary {
            text-decoration: none;
        }

        .link-secondary:hover {
            color: #cd70e2 !important;
        }
    </style>
</head>
<body>
    <!-- container是bootstrap的居中窄的显示方案 -->
    <div class="container bg-body-secondary">
        <div class="row">
            <div class="col-md-2 leftmenu" id="leftmenu"></div>
            <div class="col-md-9 kc ms-3">
                <div class="row mt-3 pb-1 border-bottom border-info">
                    <div class="col-md-2">添加课程</div>
                    <div class="col-md-1 offset-md-8">
                        <a class="nav-link link-success" href="JavaScript:history.go(-1)">返回</a>
                    </div>
                </div>
                <div class="row mt-3">
                    <form>
                        <div class="mb-3 row">
                            <label for="course-number" class="col-sm-2 col-form-label">课程编号:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="course-number" value="">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="course-name" class="col-sm-2 col-form-label">课程名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="course-name">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="course-department" class="col-sm-2 col-form-label">院系:</label>
                            <div class="col-sm-10">
                                <select class="form-select" name="" id="course-department">
                                    <option selected>-- 请选择院系 --</option>
                                    <option value="1">计算机科学与应用系</option>
                                    <option value="2">中文系</option>
                                    <option value="3">教育系</option>
                                    <option value="4">旅游与酒店系</option>
                                    <option value="5">幼儿师范部</option>
                                    <option value="6">音乐系</option>
                                    <option value="7">美术系</option>
                                    <option value="8">体育系</option>
                                    <option value="9">机电系</option>
                                    <option value="10">数学系</option>
                                    <option value="11">现代系</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="course-teacher" class="col-sm-2 col-form-label">教师:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="course-teacher">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <div class="col-sm-12">
                                <button type="submit" class="btn btn-outline-primary">提交:</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function () {
            // 当用户点击class是nav-tab的标签给该标签(添加之前删除所有active类)添加active类
            $(".nav-tab").click(function (e) {
                // 删除nav-tab所有的active类
                $(".nav-tab").removeClass("active");
                // 给点击的标签添加active类
                $(this).addClass("active");
            })
        })
    </script>
</body>
</html>